<template>
    <div class="login-container">
        <div class="taiji-container">
            <div class="taiji"></div>
        </div>
        <div class="login-box">
            <h2 class="login-title">寻经问道</h2>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="top">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="loginForm.phone" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号"
                        class="custom-input" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password
                        class="custom-input" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loading">
                        <i class="yin-yang-icon"></i> 登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gua-container">
            <div v-for="(gua, index) in guaList" :key="index" class="gua"
                :style="{ transform: `rotate(${gua.rotate}deg)` }">{{
                    gua.text }}</div>
        </div>
    </div>
</template>

<script>
import { login } from '@/api/index'
export default {
    data() {
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入手机号'))
            } else if (!/^1[3-9]\d{9}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            } else {
                callback()
            }
        }

        return {
            loginForm: {
                phone: '',
                password: ''
            },
            loginRules: {
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            loading: false,
            guaList: [
                { text: '䷀', rotate: 0 }, // 乾
                { text: '䷁', rotate: 45 }, // 坤
                { text: '䷂', rotate: 90 }, // 屯
                { text: '䷃', rotate: 135 } // 蒙
            ]
        }
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    login(this.loginForm)
                        .then((res) => {
                            console.log(res);
                            // 存储
                            res.data.user['nickName'] = '游客';
                            res.data.user['avatarUrl'] = 'https://www.xjwd.net:9500/file/statics/2025/01/03/11_20250103075128A010.png';

                            localStorage.setItem('token', res.data.token);
                            localStorage.setItem('userInfo', JSON.stringify(res.data.user));
                            // 登录成功跳转首页
                            this.$router.push('/')
                        })
                        .catch((error) => {
                            console.log('错误内容:', error);

                        });
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2a1f1d url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%239C928C" d="M20 100Q40 50 100 20q60 30 80 80t-80 80q-60-30-80-80Z"/></svg>');
    position: relative;
    overflow: hidden;
}

.taiji-container {
    position: absolute;
    width: 400px;
    height: 400px;
    animation: rotate 20s linear infinite;

    .taiji {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #000 50%, #fff 50%);
        border-radius: 50%;
        position: relative;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 50%;
            border-radius: 50%;
            border: 20px solid #2a1f1d;
        }

        &::before {
            background: #fff;
            left: 25%;
            transform: translateY(-50%);
        }

        &::after {
            background: #000;
            left: 25%;
            bottom: 0;
            transform: translateY(50%);
        }
    }
}

.login-box {
    width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1;
    position: relative;
    border: 1px solid #c4a484;
}

.login-title {
    text-align: center;
    color: #6b4f4b;
    font-size: 28px;
    margin-bottom: 30px;
    font-family: '楷体', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.login-btn {
    width: 100%;
    background: linear-gradient(45deg, #6b4f4b, #c4a484);
    border: none;
    font-size: 18px;
    color: #fff;
    height: 45px;
    transition: all 0.3s;
    position: relative;

    &:hover {
        background: linear-gradient(45deg, #c4a484, #6b4f4b);
        transform: scale(1.02);
    }
}

.yin-yang-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: linear-gradient(to right, #000 50%, #fff 50%);
    border-radius: 50%;
    margin-right: 8px;
}

.gua-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .gua {
        position: absolute;
        font-size: 24px;
        color: rgba(156, 146, 140, 0.3);
        font-family: 'SimSun';

        &:nth-child(1) {
            top: 10%;
            left: 10%;
        }

        &:nth-child(2) {
            top: 10%;
            right: 10%;
        }

        &:nth-child(3) {
            bottom: 10%;
            left: 10%;
        }

        &:nth-child(4) {
            bottom: 10%;
            right: 10%;
        }
    }
}

::v-deep .custom-input {
    .el-input__inner {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #c4a484;
        border-radius: 20px;
        height: 40px;

        &:focus {
            border-color: #6b4f4b;
            box-shadow: 0 0 8px rgba(107, 79, 75, 0.3);
        }
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>